Skip to content

Improve TV connect screen UI #7795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 19, 2025
Merged

Improve TV connect screen UI #7795

merged 3 commits into from
Mar 19, 2025

Conversation

kl
Copy link
Contributor

@kl kl commented Mar 11, 2025

  • Implements the navigation rail design for Android TV
  • Implements the TV notification banner design
  • Adds two new Gradle modules:
    • tv: contains the Android TV specific Compose components (e.g. the NavigationDrawerTV component)
    • ui/component: contains Compose-specific code that is needed by both the app module and the tv module.

This change is Reviewable

@kl kl added the Android Issues related to Android label Mar 11, 2025
Copy link
Contributor

@Rawa Rawa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed 48 of 48 files at r1, all commit messages.
Reviewable status: all files reviewed, 4 unresolved discussions


android/settings.gradle.kts line 26 at r1 (raw file):

    ":lib:resource",
    ":lib:shared",
    ":lib:shared-compose",

Let's talk about this name internally, I think we should align it how it fits in our gradle module restructuring.


android/lib/shared/src/main/kotlin/net/mullvad/mullvadvpn/lib/shared/InAppNotification.kt line 1 at r1 (raw file):

package net.mullvad.mullvadvpn.lib.shared

Should probably not be in shared but rather the lib/model


android/lib/shared-compose/src/main/kotlin/net/mullvad/mullvadvpn/lib/shared/compose/test/ComposeTestTagConstants.kt line 1 at r1 (raw file):

package net.mullvad.mullvadvpn.lib.shared.compose.test

Not sure where we want these testTags to live, both test and code use them. They are the worst, let's discuss internally when we talk about the rest of the modules.


android/lib/shared/src/main/kotlin/net/mullvad/mullvadvpn/lib/shared/VersionInfo.kt line 1 at r1 (raw file):

package net.mullvad.mullvadvpn.lib.shared

Possibly should be in domain (depending if it makes sense, it is more part of a repository thing it may still live here)

Copy link
Contributor Author

@kl kl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewable status: 47 of 49 files reviewed, 4 unresolved discussions (waiting on @Rawa)


android/lib/shared/src/main/kotlin/net/mullvad/mullvadvpn/lib/shared/InAppNotification.kt line 1 at r1 (raw file):

Previously, Rawa (David Göransson) wrote…

Should probably not be in shared but rather the lib/model

Done.


android/lib/shared/src/main/kotlin/net/mullvad/mullvadvpn/lib/shared/VersionInfo.kt line 1 at r1 (raw file):

Previously, Rawa (David Göransson) wrote…

Possibly should be in domain (depending if it makes sense, it is more part of a repository thing it may still live here)

Done.

@kl kl marked this pull request as ready for review March 12, 2025 12:07
Pururun
Pururun previously approved these changes Mar 14, 2025
Copy link
Contributor

@Pururun Pururun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed 2 of 2 files at r2, 25 of 25 files at r3, all commit messages.
Reviewable status: all files reviewed, 4 unresolved discussions (waiting on @kl and @Rawa)

@kl kl force-pushed the improve-tv-ui-experience branch from 14753ed to f01ee89 Compare March 14, 2025 10:04
Copy link
Contributor

@Rawa Rawa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed 1 of 2 files at r2, 21 of 25 files at r3, 14 of 14 files at r4, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion


android/lib/tv/src/main/kotlin/net/mullvad/mullvadvpn/lib/tv/NavigationDrawerTv.kt line 114 at r4 (raw file):

                Modifier.fillMaxHeight()
                    .background(brush)
                    .padding(top = 24.dp, bottom = 24.dp, start = 12.dp, end = 12.dp)

Should be represented in the dimens file.

Copy link
Contributor

@Rawa Rawa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @kl)


android/lib/tv/src/main/kotlin/net/mullvad/mullvadvpn/lib/tv/NavigationDrawerTv.kt line 117 at r4 (raw file):

                    .selectableGroup()
            ) {
                val animatedPadding = animateDpAsState(if (hasFocus) 16.dp else 12.dp)

ditto

@kl kl force-pushed the improve-tv-ui-experience branch from c3c9bdd to c2ad634 Compare March 18, 2025 08:30
@albin-mullvad albin-mullvad requested review from Pururun and Rawa March 18, 2025 08:47
Copy link
Collaborator

@albin-mullvad albin-mullvad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed 2 of 48 files at r1, 1 of 14 files at r4.
Reviewable status: 47 of 50 files reviewed, 3 unresolved discussions (waiting on @kl, @Pururun, and @Rawa)


android/lib/component/build.gradle.kts line 8 at r4 (raw file):

android {
    namespace = "net.mullvad.mullvadvpn.lib.shared.compose"

As discussed afk, let's instead go with the more explicit lib.ui.component. This should also be reflected in the file structure (lib/ui/component) as well as in package names. This is what we decided (but forgot) in previous package/module discussions: https://linear.app/mullvad/issue/DROID-1651

Code quote:

lib.shared.compose

Copy link
Contributor Author

@kl kl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewable status: 47 of 50 files reviewed, 3 unresolved discussions (waiting on @Pururun and @Rawa)


android/lib/tv/src/main/kotlin/net/mullvad/mullvadvpn/lib/tv/NavigationDrawerTv.kt line 114 at r4 (raw file):

Previously, Rawa (David Göransson) wrote…

Should be represented in the dimens file.

Done.


android/lib/tv/src/main/kotlin/net/mullvad/mullvadvpn/lib/tv/NavigationDrawerTv.kt line 117 at r4 (raw file):

Previously, Rawa (David Göransson) wrote…

ditto

Done.

Copy link
Contributor Author

@kl kl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewable status: 31 of 50 files reviewed, 3 unresolved discussions (waiting on @albin-mullvad, @Pururun, and @Rawa)


android/lib/component/build.gradle.kts line 8 at r4 (raw file):

Previously, albin-mullvad wrote…

As discussed afk, let's instead go with the more explicit lib.ui.component. This should also be reflected in the file structure (lib/ui/component) as well as in package names. This is what we decided (but forgot) in previous package/module discussions: https://linear.app/mullvad/issue/DROID-1651

Done.

Copy link
Contributor

@Rawa Rawa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed 2 of 3 files at r5, 11 of 16 files at r6, all commit messages.
Reviewable status: 44 of 50 files reviewed, 4 unresolved discussions (waiting on @albin-mullvad and @Pururun)


android/settings.gradle.kts line 29 at r7 (raw file):

    ":lib:theme",
    ":lib:tv",
    ":lib:ui",

Is it needed? Seemed to work w/o.


android/lib/tv/src/main/kotlin/net/mullvad/mullvadvpn/lib/tv/NavigationDrawerTv.kt line 125 at r7 (raw file):

                val animatedPadding =
                    animateDpAsState(
                        if (hasFocus) Dimens.tvDrawerHeaderStartPadding + 4.dp

maybe tvDrawerHeaderWithFocusStartPadding ?

Copy link
Contributor

@Rawa Rawa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed 1 of 16 files at r6.
Reviewable status: 45 of 50 files reviewed, 3 unresolved discussions (waiting on @albin-mullvad, @kl, and @Pururun)

Copy link
Contributor

@Rawa Rawa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed 4 of 16 files at r6, 1 of 1 files at r7.
Reviewable status: all files reviewed, 3 unresolved discussions (waiting on @albin-mullvad and @kl)

Rawa
Rawa previously approved these changes Mar 18, 2025
Copy link
Contributor

@Rawa Rawa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed 3 of 3 files at r8, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @albin-mullvad)

@Rawa Rawa requested a review from albin-mullvad March 18, 2025 14:09
Copy link
Collaborator

@albin-mullvad albin-mullvad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed 1 of 48 files at r1, 6 of 16 files at r6, 1 of 3 files at r8, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion


android/lib/component/build.gradle.kts line 8 at r4 (raw file):

Previously, kl (Kalle Lindström) wrote…

Done.

Nice!


android/settings.gradle.kts line 32 at r8 (raw file):

)

include(":test", ":test:arch", ":test:common", ":test:e2e", ":test:mockapi")

Was this automagically formatted? Are we still missing some automated formatting check?

Copy link
Contributor Author

@kl kl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewable status: 49 of 50 files reviewed, all discussions resolved (waiting on @albin-mullvad and @Rawa)


android/settings.gradle.kts line 32 at r8 (raw file):

Previously, albin-mullvad wrote…

Was this automagically formatted? Are we still missing some automated formatting check?

It was my IDE autoformatter. I tested this and it looks like ./gradlew ktfmtFormat does not format our gradle scripts. I changed this back manually for now but we probably want to figure out how to enable auto formatting for our gradle build scripts.

Copy link
Collaborator

@albin-mullvad albin-mullvad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewable status: 49 of 50 files reviewed, all discussions resolved (waiting on @Rawa)


android/settings.gradle.kts line 32 at r8 (raw file):

Previously, kl (Kalle Lindström) wrote…

It was my IDE autoformatter. I tested this and it looks like ./gradlew ktfmtFormat does not format our gradle scripts. I changed this back manually for now but we probably want to figure out how to enable auto formatting for our gradle build scripts.

Aha! But doesn't it format both buildSrc and our build.gradle.kts scripts? Could it skip just settings.gradle.kts? 🤔 Any idea whether we can make it format all of those otherwise?

Copy link
Collaborator

@albin-mullvad albin-mullvad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed 1 of 16 files at r6, 1 of 1 files at r9.
Reviewable status: all files reviewed, 2 unresolved discussions


android/settings.gradle.kts line 13 at r9 (raw file):

rootProject.name = "MullvadVPN"

include(":app", ":service", ":tile")

Revert ⏪


android/gradle/verification-metadata.xml line 200 at r8 (raw file):

            <trusting group="androidx.fragment"/>
            <trusting group="androidx.graphics"/>
            <trusting group="androidx.lifecycle"/>

Remember to put the lockfile update last so we easily can add a signature 🙏

Copy link
Contributor

@Rawa Rawa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed 1 of 1 files at r9.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @kl)

@kl kl force-pushed the improve-tv-ui-experience branch 3 times, most recently from 68718f0 to 66bfb23 Compare March 19, 2025 08:31
kl added 2 commits March 19, 2025 09:33
- Implements the navigation rail design for Android TV
- Implements the TV notification banner design
- Adds two new Gradle modules:
  * tv: contains the Android TV specific Compose components (e.g. the
     NavigationDrawerTV component)
  * ui/compose: contains Compose-specific code that is needed by
    both the app module and the tv module.
@kl kl force-pushed the improve-tv-ui-experience branch from 66bfb23 to 13f96c3 Compare March 19, 2025 08:33
Copy link
Contributor

@Rawa Rawa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed 10 of 10 files at r10.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @kl)

@Rawa Rawa force-pushed the improve-tv-ui-experience branch from 13f96c3 to faabed7 Compare March 19, 2025 08:36
Copy link
Collaborator

@albin-mullvad albin-mullvad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed 1 of 10 files at r10.
Reviewable status: :shipit: complete! all files reviewed, all discussions resolved

@Rawa Rawa merged commit 22fc75d into main Mar 19, 2025
37 checks passed
@Rawa Rawa deleted the improve-tv-ui-experience branch March 19, 2025 08:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Android Issues related to Android
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants